<template>
  <div>
    <!--头部登录-->
    <el-col :span="6" :offset="9"><span id="fort">登&nbsp;&nbsp;录</span></el-col>
    <!-- 分隔符 -->
    <el-col :span="24"><br/></el-col>
    <!-- 手机输入框 -->
    <el-col :span="20" :offset="2">
      <el-input clearable v-model="phone" placeholder="手机号"></el-input>
    </el-col>
    <!-- 分隔符 -->
    <el-col :span="24"><br/></el-col>

    <!-- （验证码，获取验证码） OR （密码） -->
    <el-col :span="20" :offset="2">
      <!-- ************************   分支1     ********************************** -->
      <!-- （验证码，获取验证码） -->
      <el-col :span="24" v-if="codeOrPW">
        <!-- 验证码输入框 -->
        <el-col :span="17">
          <el-input clearable v-model="code" placeholder="验证码"></el-input>
        </el-col>
        <!-- 获取验证码按钮 -->
        <el-col :span="2" :offset="4">
          <el-button @click="getCode">获取验证码</el-button>
        </el-col>
      </el-col>
      <!-- ************************   分支2     ********************************** -->
      <!-- （密码）  *** 分支2 *** -->
      <el-col :span="24" v-if="!codeOrPW">
        <el-input show-password v-model="password" placeholder="密码"/>
      </el-col>
    </el-col>
    <!-- 分隔符 -->
    <el-col :span="24"><br/><br/><br/><br/><br/><br/></el-col>
    <!-- 登录按钮 -->
    <el-col :span="2" :offset="11">
      <el-button @click="login">{{ loginButton}}</el-button>
    </el-col>

    <!-- 底部状态栏 -->
    <!-- 声明-->
    <el-col :span="20" :offset="2">
      <el-radio v-model="readMe" label="ok">
        未注册手机验证后自动登录，注册即代表同意<p @click="">《隐私保护指引》</p>
      </el-radio>
    </el-col>
<!--    &lt;!&ndash; 分隔符 &ndash;&gt;-->
    <el-col :span="24"><br/><br/><br/></el-col>
    <!-- 状态栏切换 -->
    <el-row>
      <el-col :span="2" :offset="10">游客</el-col>
      <el-col :span="2" :offset="0"><el-link @click="change">{{changeVul}}</el-link></el-col>
      <el-col :span="2" :offset="0">忘记密码</el-col>
    </el-row>

<!--    &lt;!&ndash; 游客 &ndash;&gt;-->
<!--    <el-col :sapn="2">游客</el-col>-->
<!--    &lt;!&ndash; 切换状态 &ndash;&gt;-->
<!--    <el-col  :sapn="2"><el-link @click="change">{{changeVul}}</el-link></el-col>-->
<!--    &lt;!&ndash; 忘记密码 &ndash;&gt;-->
<!--    <el-col :sapn="2">忘记密码</el-col>-->

  </div>
</template>

<script>
export default {
  name: "LoginByCode",
  data() {
    return {
      loginButton:'登录/注册',
      password:'',
      codeOrPW:true,
      changeVul:"密码登录",
      phone: "",
      code: "",
      canGetCode: false,
      msg1: "获取验证码",
      count: 0,
      success: true,
      readMe:""
    };
  },
  methods: {
    // 登录
    login:function(){
      if(this.changeVul == '密码登录'){
        this.loginByCode();
      }else{
        this.loginByPw();
      }
    },

    // 根据手机号获取验证码
    getCode: function () {
      this.$axios
        .get("/api/user/getCode", {
          params: {
            phone: this.phone,
          },
        })
        .then((res) => {
          var tmpData = res.data;
          if (tmpData.success) {
            this.okMsg("成功发送验证码");
            this.countDown();
          } else {
            this.errorMsg(tmpData.errorMsg);
            this.phone = "";
          }
        })
        .catch((res) => {
          console.log(res);
          this.errorMsg(res);
        });
    },

    // 根据手机号、验证码登录
    loginByCode: function () {
      let params = new URLSearchParams();
      params.append("phone", this.phone);
      params.append("code", this.code);
      this.$axios
        .post("/api/user/loginByCode", params)
        .then((res) => {
          var tmpData = res.data;
          console.log(res);
          if (tmpData.success) {
            this.okMsg("登录成功");
            localStorage.setItem("token",tmpData.data);
            this.$router.push("/master");
          } else {
            this.errorMsg(tmpData.errorMsg);
          }
        })
        .catch((res) => {
          console.log("请求失败！");
          this.errorMsg(res);
        });
    },

    // 根据手机号、密码登录
    loginByPw:function(){
      let params = new URLSearchParams();
      params.append("phone", this.phone);
      params.append("password", this.password);
      this.$axios
              .post("/api/user/loginByPw", params)
              .then((res) => {
                var tmpData = res.data;
                console.log(res);
                if (tmpData.success) {
                  this.okMsg("登录成功");
                  localStorage.setItem("token",tmpData.data);
                  this.$router.push("/home");
                } else {
                  this.errorMsg(tmpData.errorMsg);
                }
              })
              .catch((res) => {
                console.log("请求失败！");
                this.errorMsg(res);
              });
    },

    // 切换密码登录
    change:function(){
      this.codeOrPW = !this.codeOrPW;
      if(this.changeVul=="密码登录"){
        this.changeVul = "验证码登录";
        this.loginButton = "登录";
      }else{
        this.changeVul = "密码登录";
        this.loginButton = "登录/注册";
      }
    },

    // 倒计时
    countDown: function () {
      this.count = 60; //赋值60秒
      var times = setInterval(() => {
        this.count--; //递减
        this.msg1 = this.count + "秒后重试";
        if (this.count <= 0) {
          this.msg1 = "获取验证码";
          clearInterval(times);
        }
      }, 1000); //1000毫秒后执行
    },

    // 异常信息提示
    errorMsg: function (errorMsg) {
      this.$message.error(errorMsg);
    },

    // 正确信息提示
    okMsg: function (okMsg) {
      this.$message.success(okMsg);
    },


  },
};
</script>

<style scoped>
#root {
  background-image: url(https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg);
}
p {
  display: inline;
}
#end {
  /*border: 1px solid red;*/
  /*width: 300px;*/
  /*height: 400px;*/
  position: absolute;
  right: 20%;
  bottom: 5%;
}
#loginButton {
  /*border: 1px solid #ffce69;*/
  /*width: 300px;*/
  /*height: 400px;*/
  position: absolute;
  right: 40%;
  bottom: 15%;
}
#head {
  width: 200px;
  height: 150px;
  margin: auto;
  /*position: ;*/
  top: -50%;
  left: 0;
  bottom: 0;
  right: 0;
  /*background-color: #d6ff93;*/
}
#code {
  /*border: 1px solid #2569ff;*/
}
#inputCode {
  width: 60%;
}
#getCode {
  width: 40%;
}
#code div {
  float: left;
}
#fort {
  font-size: 30px;
}
</style>
